<template>
	<div class="wrapper">
		<Title></Title>
		<div class="content">
			<ul>
				<li v-for="(item,i) in list" :key="i" ref="li" class="ui-list-item">
					<span v-text="item"></span>
					<input type="text" :placeholder="hint[i]"></input>
				</li>
				<li class="ui-list-item">
					<div v-text="`设置为默认地址`"></div>
					<label class="ui-cell">
						<input name="is_default" type="checkbox" ref="checkbox">
					</label>
				</li>
			</ul>
		</div>
		<div class="add" @click="add">
			<a v-text="`保存地址`"></a>
		</div>
		<Warning :isShow="isShow">
			<div slot="title" class="xe-dialog-title">提示</div>
			<div slot="text" class="xe-dialog-text" v-text="text"></div>
			<div slot="close" class="xe-dialog-action" @click="close">
				<div class="xe-button">
					<span>确认</span>
				</div>
			</div>
		</Warning>
	</div>
</template>

<script type="text/ecmascript-6">
    import Title from "../components/Title";
    import Warning from "../components/Warning.vue";
    export default {
        name: "Addsite",
        components: {//注册组件不然不能使用
            Title,Warning
        },
        computed:{},
	    data(){
            return {
                isShow: false,
                isWarning:false,
                list: ["收货人:","手机号码:","所在地区:","详细地址:"],
                hint:["真实姓名","手机号","省 市 区 街道信息","详细地址"],
	            text:"",
            }
	    },
	    methods:{
            getUser(){//获取用户名
                let cookie = document.cookie.split(";");
                let user = null;
                if(cookie.length){
                    for(let i=0;i<cookie.length;i++){
                        let arr = cookie[i].split("=");
                        if(arr[0] === "userinfo"){
                            user = arr[1];
                        }
                    }
                }
                return user;
            },
            add(){
                let site = [];
                let data = {};//存储填写的地址
	            for(let i=0;i<this.$refs.li.length;i++){
	                if(this.$refs.li[i].children[1].value){
                        site.push(this.$refs.li[i].children[1].value);
	                }else{
	                    if(i ===0 ){this.text = '请输入收货人';return
	                    }else if(i ===1){this.text = '请输入手机号码';return
		                }else if(i ===2){this.text = '请输入所在地区';return}
		                else if(i ===3){this.text = '请输入详情地址';return}
	                }
	            }
	            if(site.length === this.$refs.li.length){
                    data.user = this.getUser();
                    data.consignee = site[0];
                    data.phone = site[1];
                    data.site = site[2]+" "+site[3];
                    data.activate = this.$refs.checkbox.checked;
                    this.$store.dispatch("site/saveSite",data);
	            }else{
	                /*弹出信息没填*/
                    this.isWarning = !this.isWarning ;
                    this.isShow = !this.isShow;
	            }
            },
            close(){
                this.isWarning = !this.isWarning ;
	            this.isShow = !this.isShow;
            },
	    }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
	.wrapper
		width 100%
		height 100%
		.content
			width 100%
			height 100%
			padding-top .9rem
			padding-bottom 1.2rem
			overflow-y auto
			ul
				.ui-list-item
					border-bottom: 0.01rem solid #ccc
					overflow: hidden
					background: #fff
					padding: .2rem .3rem
					display: flex
					box-align: center
					-webkit-box-align: center
					align-items center
					color: #3c3c3c
					font-size: .3rem
					span
						width 1.7rem
						white-space:nowrap;
					input
						padding: .18rem .3rem;
						width: 100%;
						-webkit-box-flex: 1;
						box-sizing: border-box;
						font-size: .28rem;
						border: 0;
						text-decoration: none;
						outline: 0;
						vertical-align: middle
					label
						display: block;
						-webkit-box-flex: 1;
						box-flex: 1;
						width: 100%;
						text-align: right;
						input
							width .24rem
							height .24rem
							font-family: sans-serif;
							font-size: 100%;
							line-height: 1.15;
							margin: 0
					div
						white-space:nowrap;
		.add
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background: #fff;
			z-index: 1;
			a
				display: block;
				outline: 0;
				background: #ff6700;
				color: #fff;
				text-align: center;
				width: 100%;
				height: 1rem;
				line-height: 1rem;
				font-size: .3rem;


</style>